<template>
    <div class="custom-broder" :class="[active ? 'light' : '']">
        <div class="table-header">
            <img src="@/assets/image/table-header.png" class="table-header_image" />
            <img src="@/assets/image/light-samll_header.png" class="table-header_image light-header" />
            <span class="flex flex-align-center">{{ title }}</span>
        </div>
        <div class="table-content">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
// 数据部分
const props = defineProps({
    title: { type: String, default: "" },
    duration: { type: Number, default: 1000 }, // 新：动画时长
    onFlashEnd: { type: Function, default: null }, // 新：动画结束回调
});

// 复用动画逻辑
const active = ref(false);
function flash() {
    if (active.value) return; // 防抖：动画进行中再次调用直接忽略
    active.value = true;
    setTimeout(() => {
        active.value = false;
        props.onFlashEnd?.();
    }, props.duration);
}
// 对外继续暴露“闪一下”的能力
defineExpose({ flash: flash });
</script>
<style lang="scss" scoped>
$transition: all linear 0.35s;
.custom-broder.light {
    &::before {
        opacity: 0;
    }
    &::after {
        opacity: 1;
    }
    .table-header_image {
        opacity: 0 !important;
        &.light-header {
            opacity: 1 !important;
        }
    }
}
.custom-broder {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        background-image: linear-gradient(180deg, rgb(8, 22, 52, 0.5) 0%, rgba(8, 22, 52, 0.2) 100%);
        transition: $transition;
        opacity: 1;
        width: 100%;
        height: 100%;
    }
    &::after {
        content: "";
        background-image: url("@/assets/image/light-samll.png");
        background-repeat: no-repeat;
        background-size: cover;
        transition: $transition;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}
.custom-broder {
    border: 1px solid rgb(54, 108, 216);
    box-shadow: inset 0 1px 16px 0 #1753a3;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .table-header {
        position: relative;
        .table-header_image {
            width: 100%;
            max-height: 45px;
            opacity: 1;
            transition: $transition;
            &.light-header {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
                width: 100%;
                height: 45px;
            }
        }
        span {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 20px;
            font-weight: bold;
            left: 0;
            top: 0;
            font-weight: bold;
            padding-left: 15px;
        }
    }
    .table-content {
        padding: 5px;
        height: calc(100% - 45px);
        width: 100%;
    }
}
.table-header,
.table-content {
    width: 100%;
}
</style>
